<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>jQuery / Lodash</title>
    <meta name="generator" content="VuePress 1.5.2">
    <link rel="apple-touch-icon" href="/blog/apple-touch-icon.png">
    <link rel="icon" href="/blog/favicon.ico">
    <link rel="manifest" href="/blog/manifest.json">
    <link rel="mask-icon" href="/blog/icons/icon.svg" color="#ffffff">
    <meta name="description" content="可能是全网最给力的前端博客">
    <meta name="theme-color" content="#ffffff">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="default">
    <meta name="msapplication-TileImage" content="/icons/icon-144x144.png">
    <link rel="preload" href="/blog/assets/css/0.styles.3f022aa2.css" as="style"><link rel="preload" href="/blog/assets/js/app.7fa07907.js" as="script"><link rel="preload" href="/blog/assets/js/2.b6c629b5.js" as="script"><link rel="preload" href="/blog/assets/js/17.6ca97902.js" as="script"><link rel="preload" href="/blog/assets/js/4.1dbf8b08.js" as="script"><link rel="preload" href="/blog/assets/js/3.589a64d8.js" as="script"><link rel="prefetch" href="/blog/assets/js/10.8e59817e.js"><link rel="prefetch" href="/blog/assets/js/11.34cd2f44.js"><link rel="prefetch" href="/blog/assets/js/12.445d88fd.js"><link rel="prefetch" href="/blog/assets/js/13.e6460b96.js"><link rel="prefetch" href="/blog/assets/js/14.d0ee0fcf.js"><link rel="prefetch" href="/blog/assets/js/15.e91e78ed.js"><link rel="prefetch" href="/blog/assets/js/16.8310de97.js"><link rel="prefetch" href="/blog/assets/js/18.a82e534b.js"><link rel="prefetch" href="/blog/assets/js/19.e3a914ee.js"><link rel="prefetch" href="/blog/assets/js/20.6db77b80.js"><link rel="prefetch" href="/blog/assets/js/21.e705be23.js"><link rel="prefetch" href="/blog/assets/js/22.efc39414.js"><link rel="prefetch" href="/blog/assets/js/23.5f4c7658.js"><link rel="prefetch" href="/blog/assets/js/24.359a62e4.js"><link rel="prefetch" href="/blog/assets/js/25.c49ef7a9.js"><link rel="prefetch" href="/blog/assets/js/26.8d45691f.js"><link rel="prefetch" href="/blog/assets/js/27.364b1802.js"><link rel="prefetch" href="/blog/assets/js/28.485228c0.js"><link rel="prefetch" href="/blog/assets/js/29.0ee8fc42.js"><link rel="prefetch" href="/blog/assets/js/30.465920a7.js"><link rel="prefetch" href="/blog/assets/js/5.9253897f.js"><link rel="prefetch" href="/blog/assets/js/6.4c1f13e3.js"><link rel="prefetch" href="/blog/assets/js/7.bc1839d0.js"><link rel="prefetch" href="/blog/assets/js/8.611f5ec5.js"><link rel="prefetch" href="/blog/assets/js/9.5813bb74.js">
    <link rel="stylesheet" href="/blog/assets/css/0.styles.3f022aa2.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/blog/" class="home-link router-link-active"><img src="/blog/app.png" alt="卢本伟广场" class="logo"> <span class="site-name can-hide">卢本伟广场</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/blog/dsm/" class="nav-link router-link-active">
  歪比歪比
</a></div><div class="nav-item"><a href="/blog/lbw/" class="nav-link">
  歪比吧卜
</a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/blog/dsm/" class="nav-link router-link-active">
  歪比歪比
</a></div><div class="nav-item"><a href="/blog/lbw/" class="nav-link">
  歪比吧卜
</a></div> <!----></nav>  <ul class="sidebar-links"><li><a href="/blog/dsm/" aria-current="page" class="sidebar-link">前端自我修养</a></li><li><a href="/blog/dsm/algorithm.html" class="sidebar-link">前端面试算法</a></li><li><a href="/blog/dsm/jsbook.html" class="sidebar-link">JS高级程序设计</a></li><li><a href="/blog/dsm/cc150.html" class="sidebar-link">程序员面试金典</a></li><li><a href="/blog/dsm/pattern.html" class="sidebar-link">前端设计模式</a></li><li><a href="/blog/dsm/architecture.html" class="sidebar-link">前端工程架构</a></li><li><a href="/blog/dsm/protocol.html" class="sidebar-link">计算机网络</a></li><li><a href="/blog/dsm/node.html" class="sidebar-link">服务端开发</a></li><li><a href="/blog/dsm/webgl.html" class="sidebar-link">图形3D开发</a></li><li><a href="/blog/dsm/lodash.html" aria-current="page" class="active sidebar-link">jQuery / Lodash</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/blog/dsm/lodash.html#effects" class="sidebar-link">EFFECTS</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/blog/dsm/lodash.html#fade-in" class="sidebar-link">Fade In</a></li><li class="sidebar-sub-header"><a href="/blog/dsm/lodash.html#fade-out" class="sidebar-link">Fade Out</a></li><li class="sidebar-sub-header"><a href="/blog/dsm/lodash.html#hide" class="sidebar-link">Hide</a></li><li class="sidebar-sub-header"><a href="/blog/dsm/lodash.html#show" class="sidebar-link">Show</a></li></ul></li><li class="sidebar-sub-header"><a href="/blog/dsm/lodash.html#elements" class="sidebar-link">ELEMENTS</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/blog/dsm/lodash.html#add-class" class="sidebar-link">Add Class</a></li><li class="sidebar-sub-header"><a href="/blog/dsm/lodash.html#after" class="sidebar-link">After</a></li><li class="sidebar-sub-header"><a href="/blog/dsm/lodash.html#append" class="sidebar-link">Append</a></li><li class="sidebar-sub-header"><a href="/blog/dsm/lodash.html#before" class="sidebar-link">Before</a></li><li class="sidebar-sub-header"><a href="/blog/dsm/lodash.html#children" class="sidebar-link">Children</a></li><li class="sidebar-sub-header"><a href="/blog/dsm/lodash.html#clone" class="sidebar-link">Clone</a></li><li class="sidebar-sub-header"><a href="/blog/dsm/lodash.html#contains" class="sidebar-link">Contains</a></li><li class="sidebar-sub-header"><a href="/blog/dsm/lodash.html#contains-selector" class="sidebar-link">Contains Selector</a></li><li class="sidebar-sub-header"><a href="/blog/dsm/lodash.html#each" class="sidebar-link">Each</a></li><li class="sidebar-sub-header"><a href="/blog/dsm/lodash.html#empty" class="sidebar-link">Empty</a></li><li class="sidebar-sub-header"><a href="/blog/dsm/lodash.html#filter" class="sidebar-link">Filter</a></li><li class="sidebar-sub-header"><a href="/blog/dsm/lodash.html#has-class" class="sidebar-link">Has Class</a></li><li class="sidebar-sub-header"><a href="/blog/dsm/lodash.html#index" class="sidebar-link">Index</a></li><li class="sidebar-sub-header"><a href="/blog/dsm/lodash.html#position" class="sidebar-link">Position</a></li><li class="sidebar-sub-header"><a href="/blog/dsm/lodash.html#relative-position" class="sidebar-link">Relative Position</a></li><li class="sidebar-sub-header"><a href="/blog/dsm/lodash.html#prepend" class="sidebar-link">Prepend</a></li><li class="sidebar-sub-header"><a href="/blog/dsm/lodash.html#remove" class="sidebar-link">Remove</a></li><li class="sidebar-sub-header"><a href="/blog/dsm/lodash.html#toggle-class" class="sidebar-link">Toggle Class</a></li></ul></li><li class="sidebar-sub-header"><a href="/blog/dsm/lodash.html#array" class="sidebar-link">Array</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/blog/dsm/lodash.html#chunk" class="sidebar-link">_chunk</a></li><li class="sidebar-sub-header"><a href="/blog/dsm/lodash.html#difference" class="sidebar-link">_.difference</a></li><li class="sidebar-sub-header"><a href="/blog/dsm/lodash.html#frompairs" class="sidebar-link">_.fromPairs</a></li><li class="sidebar-sub-header"><a href="/blog/dsm/lodash.html#intersection" class="sidebar-link">_.intersection</a></li></ul></li><li class="sidebar-sub-header"><a href="/blog/dsm/lodash.html#collection" class="sidebar-link">Collection</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/blog/dsm/lodash.html#groupby" class="sidebar-link">_.groupBy</a></li><li class="sidebar-sub-header"><a href="/blog/dsm/lodash.html#minby" class="sidebar-link">_.minBy</a></li><li class="sidebar-sub-header"><a href="/blog/dsm/lodash.html#sample" class="sidebar-link">_.sample</a></li></ul></li></ul></li><li><a href="/blog/dsm/finger.html" class="sidebar-link">AlloyFinger</a></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="jquery-lodash"><a href="#jquery-lodash" class="header-anchor">#</a> jQuery / Lodash</h1> <img id="h3CenterTopImg" src="/blog/images/IMG_7868.png"> <h2 id="effects"><a href="#effects" class="header-anchor">#</a> EFFECTS</h2> <h3 id="fade-in"><a href="#fade-in" class="header-anchor">#</a> Fade In</h3> <div class="compare" data-v-2a5edddd><div class="left" data-v-2a5edddd><p data-v-2a5edddd>JQUERY</p> <div class="jq" data-v-2a5edddd><pre data-v-2a5edddd><code class="jQuery" data-v-2a5edddd>$(el).fadeIn()</code></pre></div> <div class="effect" data-v-2a5edddd></div></div> <div class="right" data-v-2a5edddd><p data-v-2a5edddd>IE10+</p> <div class="js" data-v-2a5edddd><pre data-v-2a5edddd><code class="javascript" data-v-2a5edddd>el.classList.add('show')
el.classList.remove('hide')</code></pre></div> <div class="css" data-v-2a5edddd><pre data-v-2a5edddd><code class="css" data-v-2a5edddd>.show {
  transition: opacity 400ms
}
.hide {
  opacity: 0
}</code></pre></div></div></div> <h3 id="fade-out"><a href="#fade-out" class="header-anchor">#</a> Fade Out</h3> <div class="compare" data-v-2a5edddd><div class="left" data-v-2a5edddd><p data-v-2a5edddd>JQUERY</p> <div class="jq" data-v-2a5edddd><pre data-v-2a5edddd><code class="jQuery" data-v-2a5edddd>$(el).hide()</code></pre></div> <div class="effect" data-v-2a5edddd></div></div> <div class="right" data-v-2a5edddd><p data-v-2a5edddd>IE10+</p> <div class="js" data-v-2a5edddd><pre data-v-2a5edddd><code class="javascript" data-v-2a5edddd>el.classList.add('hide')
el.classList.remove('show')</code></pre></div> <div class="css" data-v-2a5edddd><pre data-v-2a5edddd><code class="css" data-v-2a5edddd>.show {
  opacity: 1;
}
.hide {
  opacity: 0;
  transition: opacity 400ms;
}</code></pre></div></div></div> <h3 id="hide"><a href="#hide" class="header-anchor">#</a> Hide</h3> <div class="compare" data-v-2a5edddd><div class="left" data-v-2a5edddd><p data-v-2a5edddd>JQUERY</p> <div class="jq" data-v-2a5edddd><pre data-v-2a5edddd><code class="jQuery" data-v-2a5edddd>$(el).hide()</code></pre></div> <div class="effect" data-v-2a5edddd></div></div> <div class="right" data-v-2a5edddd><p data-v-2a5edddd>IE8+</p> <div class="js" data-v-2a5edddd><pre data-v-2a5edddd><code class="javascript" data-v-2a5edddd>el.style.display = 'none'</code></pre></div> <div class="css" data-v-2a5edddd></div></div></div> <h3 id="show"><a href="#show" class="header-anchor">#</a> Show</h3> <div class="compare" data-v-2a5edddd><div class="left" data-v-2a5edddd><p data-v-2a5edddd>JQUERY</p> <div class="jq" data-v-2a5edddd><pre data-v-2a5edddd><code class="jQuery" data-v-2a5edddd>$(el).show()</code></pre></div> <div class="effect" data-v-2a5edddd></div></div> <div class="right" data-v-2a5edddd><p data-v-2a5edddd>IE8+</p> <div class="js" data-v-2a5edddd><pre data-v-2a5edddd><code class="javascript" data-v-2a5edddd>el.style.display = ''</code></pre></div> <div class="css" data-v-2a5edddd></div></div></div> <h2 id="elements"><a href="#elements" class="header-anchor">#</a> ELEMENTS</h2> <h3 id="add-class"><a href="#add-class" class="header-anchor">#</a> Add Class</h3> <div class="compare" data-v-2a5edddd><div class="left" data-v-2a5edddd><p data-v-2a5edddd>JQUERY</p> <div class="jq" data-v-2a5edddd><pre data-v-2a5edddd><code class="jQuery" data-v-2a5edddd>$(el).addClass(className)</code></pre></div> <div class="effect" data-v-2a5edddd></div></div> <div class="right" data-v-2a5edddd><p data-v-2a5edddd>IE10+</p> <div class="js" data-v-2a5edddd><pre data-v-2a5edddd><code class="javascript" data-v-2a5edddd>el.classList.add(className)</code></pre></div> <div class="css" data-v-2a5edddd></div></div></div> <h3 id="after"><a href="#after" class="header-anchor">#</a> After</h3> <div class="compare" data-v-2a5edddd><div class="left" data-v-2a5edddd><p data-v-2a5edddd>JQUERY</p> <div class="jq" data-v-2a5edddd><pre data-v-2a5edddd><code class="jQuery" data-v-2a5edddd>$(target).after(element)</code></pre></div> <div class="effect" data-v-2a5edddd></div></div> <div class="right" data-v-2a5edddd><p data-v-2a5edddd>IE8+</p> <div class="js" data-v-2a5edddd><pre data-v-2a5edddd><code class="javascript" data-v-2a5edddd>target.insertAdjacentElement('afterend', element)</code></pre></div> <div class="css" data-v-2a5edddd></div></div></div> <h3 id="append"><a href="#append" class="header-anchor">#</a> Append</h3> <div class="compare" data-v-2a5edddd><div class="left" data-v-2a5edddd><p data-v-2a5edddd>JQUERY</p> <div class="jq" data-v-2a5edddd><pre data-v-2a5edddd><code class="jQuery" data-v-2a5edddd>$(parent).append(el)</code></pre></div> <div class="effect" data-v-2a5edddd></div></div> <div class="right" data-v-2a5edddd><p data-v-2a5edddd>IE8+</p> <div class="js" data-v-2a5edddd><pre data-v-2a5edddd><code class="javascript" data-v-2a5edddd>parent.appendChild(el)</code></pre></div> <div class="css" data-v-2a5edddd></div></div></div> <h3 id="before"><a href="#before" class="header-anchor">#</a> Before</h3> <div class="compare" data-v-2a5edddd><div class="left" data-v-2a5edddd><p data-v-2a5edddd>JQUERY</p> <div class="jq" data-v-2a5edddd><pre data-v-2a5edddd><code class="jQuery" data-v-2a5edddd>$(target).before(element)</code></pre></div> <div class="effect" data-v-2a5edddd></div></div> <div class="right" data-v-2a5edddd><p data-v-2a5edddd>IE8+</p> <div class="js" data-v-2a5edddd><pre data-v-2a5edddd><code class="javascript" data-v-2a5edddd>target.insertAdjacentElement('beforebegin', element)</code></pre></div> <div class="css" data-v-2a5edddd></div></div></div> <h3 id="children"><a href="#children" class="header-anchor">#</a> Children</h3> <div class="compare" data-v-2a5edddd><div class="left" data-v-2a5edddd><p data-v-2a5edddd>JQUERY</p> <div class="jq" data-v-2a5edddd><pre data-v-2a5edddd><code class="jQuery" data-v-2a5edddd>$(el).children()</code></pre></div> <div class="effect" data-v-2a5edddd></div></div> <div class="right" data-v-2a5edddd><p data-v-2a5edddd>IE9+</p> <div class="js" data-v-2a5edddd><pre data-v-2a5edddd><code class="javascript" data-v-2a5edddd>el.children</code></pre></div> <div class="css" data-v-2a5edddd></div></div></div> <h3 id="clone"><a href="#clone" class="header-anchor">#</a> Clone</h3> <div class="compare" data-v-2a5edddd><div class="left" data-v-2a5edddd><p data-v-2a5edddd>JQUERY</p> <div class="jq" data-v-2a5edddd><pre data-v-2a5edddd><code class="jQuery" data-v-2a5edddd>$(el).clone()</code></pre></div> <div class="effect" data-v-2a5edddd></div></div> <div class="right" data-v-2a5edddd><p data-v-2a5edddd>IE8+</p> <div class="js" data-v-2a5edddd><pre data-v-2a5edddd><code class="javascript" data-v-2a5edddd>el.cloneNode(true)</code></pre></div> <div class="css" data-v-2a5edddd></div></div></div> <h3 id="contains"><a href="#contains" class="header-anchor">#</a> Contains</h3> <div class="compare" data-v-2a5edddd><div class="left" data-v-2a5edddd><p data-v-2a5edddd>JQUERY</p> <div class="jq" data-v-2a5edddd><pre data-v-2a5edddd><code class="jQuery" data-v-2a5edddd>$.contains(el, child)</code></pre></div> <div class="effect" data-v-2a5edddd></div></div> <div class="right" data-v-2a5edddd><p data-v-2a5edddd>IE8+</p> <div class="js" data-v-2a5edddd><pre data-v-2a5edddd><code class="javascript" data-v-2a5edddd>el !== child &amp;&amp; el.contains(child)</code></pre></div> <div class="css" data-v-2a5edddd></div></div></div> <h3 id="contains-selector"><a href="#contains-selector" class="header-anchor">#</a> Contains Selector</h3> <div class="compare" data-v-2a5edddd><div class="left" data-v-2a5edddd><p data-v-2a5edddd>JQUERY</p> <div class="jq" data-v-2a5edddd><pre data-v-2a5edddd><code class="jQuery" data-v-2a5edddd>$(el).find(selector).length</code></pre></div> <div class="effect" data-v-2a5edddd></div></div> <div class="right" data-v-2a5edddd><p data-v-2a5edddd>IE8+</p> <div class="js" data-v-2a5edddd><pre data-v-2a5edddd><code class="javascript" data-v-2a5edddd>el.querySelectorAll(selector).length</code></pre></div> <div class="css" data-v-2a5edddd></div></div></div> <h3 id="each"><a href="#each" class="header-anchor">#</a> Each</h3> <div class="compare" data-v-2a5edddd><div class="left" data-v-2a5edddd><p data-v-2a5edddd>JQUERY</p> <div class="jq" data-v-2a5edddd><pre data-v-2a5edddd><code class="jQuery" data-v-2a5edddd>$(selector).each(function(i, el){})</code></pre></div> <div class="effect" data-v-2a5edddd></div></div> <div class="right" data-v-2a5edddd><p data-v-2a5edddd>IE9+</p> <div class="js" data-v-2a5edddd><pre data-v-2a5edddd><code class="javascript" data-v-2a5edddd>var elements = document.querySelectorAll(selector)
Array.prototype.forEach.call(elements, function(el, i){})</code></pre></div> <div class="css" data-v-2a5edddd></div></div></div> <h3 id="empty"><a href="#empty" class="header-anchor">#</a> Empty</h3> <div class="compare" data-v-2a5edddd><div class="left" data-v-2a5edddd><p data-v-2a5edddd>JQUERY</p> <div class="jq" data-v-2a5edddd><pre data-v-2a5edddd><code class="jQuery" data-v-2a5edddd>$(el).empty()</code></pre></div> <div class="effect" data-v-2a5edddd></div></div> <div class="right" data-v-2a5edddd><p data-v-2a5edddd>IE8+</p> <div class="js" data-v-2a5edddd><pre data-v-2a5edddd><code class="javascript" data-v-2a5edddd>while(el.firstChild) el.removeChild(el.firstChild)</code></pre></div> <div class="css" data-v-2a5edddd></div></div></div> <h3 id="filter"><a href="#filter" class="header-anchor">#</a> Filter</h3> <div class="compare" data-v-2a5edddd><div class="left" data-v-2a5edddd><p data-v-2a5edddd>JQUERY</p> <div class="jq" data-v-2a5edddd><pre data-v-2a5edddd><code class="jQuery" data-v-2a5edddd>$(selector).filter(filterFn)</code></pre></div> <div class="effect" data-v-2a5edddd></div></div> <div class="right" data-v-2a5edddd><p data-v-2a5edddd>IE9+</p> <div class="js" data-v-2a5edddd><pre data-v-2a5edddd><code class="javascript" data-v-2a5edddd>Array.prototype.filter.call(document.querySelectorAll(selector), filterFn)</code></pre></div> <div class="css" data-v-2a5edddd></div></div></div> <h3 id="has-class"><a href="#has-class" class="header-anchor">#</a> Has Class</h3> <div class="compare" data-v-2a5edddd><div class="left" data-v-2a5edddd><p data-v-2a5edddd>JQUERY</p> <div class="jq" data-v-2a5edddd><pre data-v-2a5edddd><code class="jQuery" data-v-2a5edddd>$(el).hasClass(className)</code></pre></div> <div class="effect" data-v-2a5edddd></div></div> <div class="right" data-v-2a5edddd><p data-v-2a5edddd>IE10+</p> <div class="js" data-v-2a5edddd><pre data-v-2a5edddd><code class="javascript" data-v-2a5edddd>el.classList.contains(className)</code></pre></div> <div class="css" data-v-2a5edddd></div></div></div> <h3 id="index"><a href="#index" class="header-anchor">#</a> Index</h3> <div class="compare" data-v-2a5edddd><div class="left" data-v-2a5edddd><p data-v-2a5edddd>JQUERY</p> <div class="jq" data-v-2a5edddd><pre data-v-2a5edddd><code class="jQuery" data-v-2a5edddd>$(el).index()</code></pre></div> <div class="effect" data-v-2a5edddd></div></div> <div class="right" data-v-2a5edddd><p data-v-2a5edddd>IE9+</p> <div class="js" data-v-2a5edddd><pre data-v-2a5edddd><code class="javascript" data-v-2a5edddd>function index(el) {
    if (!el) return -1;
    var i = 1;
    while(el=el.previousElementSibling)i++
    return i;
}</code></pre></div> <div class="css" data-v-2a5edddd></div></div></div> <h3 id="position"><a href="#position" class="header-anchor">#</a> Position</h3> <div class="compare" data-v-2a5edddd><div class="left" data-v-2a5edddd><p data-v-2a5edddd>JQUERY</p> <div class="jq" data-v-2a5edddd><pre data-v-2a5edddd><code class="jQuery" data-v-2a5edddd>$(el).position()</code></pre></div> <div class="effect" data-v-2a5edddd></div></div> <div class="right" data-v-2a5edddd><p data-v-2a5edddd>IE8+</p> <div class="js" data-v-2a5edddd><pre data-v-2a5edddd><code class="javascript" data-v-2a5edddd>{left: el.offsetLeft, top: el.offsetTop}</code></pre></div> <div class="css" data-v-2a5edddd></div></div></div> <h3 id="relative-position"><a href="#relative-position" class="header-anchor">#</a> Relative Position</h3> <div class="compare" data-v-2a5edddd><div class="left" data-v-2a5edddd><p data-v-2a5edddd>JQUERY</p> <div class="jq" data-v-2a5edddd><pre data-v-2a5edddd><code class="jQuery" data-v-2a5edddd>var offset = el.offset()
{
  top: offset.top - document.body.scrollTop,
  left: offset.left - document.body.scrollLeft
}
</code></pre></div> <div class="effect" data-v-2a5edddd></div></div> <div class="right" data-v-2a5edddd><p data-v-2a5edddd>IE8+</p> <div class="js" data-v-2a5edddd><pre data-v-2a5edddd><code class="javascript" data-v-2a5edddd>el.getBoundingClientRect()</code></pre></div> <div class="css" data-v-2a5edddd></div></div></div> <h3 id="prepend"><a href="#prepend" class="header-anchor">#</a> Prepend</h3> <div class="compare" data-v-2a5edddd><div class="left" data-v-2a5edddd><p data-v-2a5edddd>JQUERY</p> <div class="jq" data-v-2a5edddd><pre data-v-2a5edddd><code class="jQuery" data-v-2a5edddd>$(parent).prepend(el)</code></pre></div> <div class="effect" data-v-2a5edddd></div></div> <div class="right" data-v-2a5edddd><p data-v-2a5edddd>IE8+</p> <div class="js" data-v-2a5edddd><pre data-v-2a5edddd><code class="javascript" data-v-2a5edddd>parent.insertBefore(el, parent.firstChild)</code></pre></div> <div class="css" data-v-2a5edddd></div></div></div> <h3 id="remove"><a href="#remove" class="header-anchor">#</a> Remove</h3> <div class="compare" data-v-2a5edddd><div class="left" data-v-2a5edddd><p data-v-2a5edddd>JQUERY</p> <div class="jq" data-v-2a5edddd><pre data-v-2a5edddd><code class="jQuery" data-v-2a5edddd>$(el).remove()</code></pre></div> <div class="effect" data-v-2a5edddd></div></div> <div class="right" data-v-2a5edddd><p data-v-2a5edddd>IE8+</p> <div class="js" data-v-2a5edddd><pre data-v-2a5edddd><code class="javascript" data-v-2a5edddd>el.parentNode.removeChild(el)</code></pre></div> <div class="css" data-v-2a5edddd></div></div></div> <h3 id="toggle-class"><a href="#toggle-class" class="header-anchor">#</a> Toggle Class</h3> <div class="compare" data-v-2a5edddd><div class="left" data-v-2a5edddd><p data-v-2a5edddd>JQUERY</p> <div class="jq" data-v-2a5edddd><pre data-v-2a5edddd><code class="jQuery" data-v-2a5edddd>$(el).toggleClass(className)</code></pre></div> <div class="effect" data-v-2a5edddd></div></div> <div class="right" data-v-2a5edddd><p data-v-2a5edddd>IE8+</p> <div class="js" data-v-2a5edddd><pre data-v-2a5edddd><code class="javascript" data-v-2a5edddd>el.classList.toggle(className)</code></pre></div> <div class="css" data-v-2a5edddd></div></div></div> <h2 id="array"><a href="#array" class="header-anchor">#</a> Array</h2> <h3 id="chunk"><a href="#chunk" class="header-anchor">#</a> _chunk</h3> <div class="compare" data-v-2a5edddd><div class="left" data-v-2a5edddd><p data-v-2a5edddd>Lodash</p> <div class="jq" data-v-2a5edddd><pre data-v-2a5edddd><code class="javascript" data-v-2a5edddd>// Underscore/Lodash
_.chunk(['a', 'b', 'c', 'd'], 2)
// =&gt; [['a', 'b'], ['c', 'd']]</code></pre></div> <div class="effect" data-v-2a5edddd></div></div> <div class="right" data-v-2a5edddd><p data-v-2a5edddd>Native</p> <div class="js" data-v-2a5edddd><pre data-v-2a5edddd><code class="javascript" data-v-2a5edddd>const chunk = (input, size) =&gt; {
  return input.reduce((arr, item, idx) =&gt; {
    return idx % size === 0
      ? [...arr, [item]]
      : [...arr.slice(0, -1), [...arr.slice(-1)[0], item]]
  }, [])
}
chunk(['a', 'b', 'c', 'd'], 2)
// =&gt; [['a', 'b'], ['c', 'd']]</code></pre></div> <div class="css" data-v-2a5edddd></div></div></div> <h3 id="difference"><a href="#difference" class="header-anchor">#</a> _.difference</h3> <div class="compare" data-v-2a5edddd><div class="left" data-v-2a5edddd><p data-v-2a5edddd>Lodash</p> <div class="jq" data-v-2a5edddd><pre data-v-2a5edddd><code class="javascript" data-v-2a5edddd>// Underscore/Lodash
console.log(_.difference([1, 2, 3, 4, 5], [5, 2, 10]))
// output: [1, 3, 4]</code></pre></div> <div class="effect" data-v-2a5edddd></div></div> <div class="right" data-v-2a5edddd><p data-v-2a5edddd>Native</p> <div class="js" data-v-2a5edddd><pre data-v-2a5edddd><code class="javascript" data-v-2a5edddd>// Native
var arrays = [[1, 2, 3, 4, 5], [5, 2, 10]];
console.log(arrays.reduce(function(a, b) {
  return a.filter(function(value) {
    return !b.includes(value)
  })
}))
// output: [1, 3, 4]</code></pre></div> <div class="css" data-v-2a5edddd></div></div></div> <h3 id="frompairs"><a href="#frompairs" class="header-anchor">#</a> _.fromPairs</h3> <div class="compare" data-v-2a5edddd><div class="left" data-v-2a5edddd><p data-v-2a5edddd>Lodash</p> <div class="jq" data-v-2a5edddd><pre data-v-2a5edddd><code class="javascript" data-v-2a5edddd>// Underscore/Lodash
_.fromPairs([['a', 1], ['b', 2]]);
// =&gt; { 'a': 1, 'b': 2 }</code></pre></div> <div class="effect" data-v-2a5edddd></div></div> <div class="right" data-v-2a5edddd><p data-v-2a5edddd>Native</p> <div class="js" data-v-2a5edddd><pre data-v-2a5edddd><code class="javascript" data-v-2a5edddd>// Native
const fromPairs = function(arr) {
  return arr.reduce(function(accumulator, value) {
    accumulator[value[0]] = value[1];
    return accumulator;
  }, {})
}</code></pre></div> <div class="css" data-v-2a5edddd></div></div></div> <h3 id="intersection"><a href="#intersection" class="header-anchor">#</a> _.intersection</h3> <div class="compare" data-v-2a5edddd><div class="left" data-v-2a5edddd><p data-v-2a5edddd>Lodash</p> <div class="jq" data-v-2a5edddd><pre data-v-2a5edddd><code class="javascript" data-v-2a5edddd>// Underscore/Lodash
console.log(_.intersection([1, 2, 3], [101, 2, 1, 10], [2, 1]))
// output: [1, 2]</code></pre></div> <div class="effect" data-v-2a5edddd></div></div> <div class="right" data-v-2a5edddd><p data-v-2a5edddd>Native</p> <div class="js" data-v-2a5edddd><pre data-v-2a5edddd><code class="javascript" data-v-2a5edddd>// Native
var arrays = [[1, 2, 3], [101, 2, 1, 10], [2, 1]];
console.log(arrays.reduce(function(a, b) {
  return a.filter(function(value) {
    return b.includes(value);
  });
}));
// output: [1, 2]</code></pre></div> <div class="css" data-v-2a5edddd></div></div></div> <h2 id="collection"><a href="#collection" class="header-anchor">#</a> Collection</h2> <h3 id="groupby"><a href="#groupby" class="header-anchor">#</a> _.groupBy</h3> <div class="compare" data-v-2a5edddd><div class="left" data-v-2a5edddd><p data-v-2a5edddd>Lodash</p> <div class="jq" data-v-2a5edddd><pre data-v-2a5edddd><code class="javascript" data-v-2a5edddd>// Underscore/Lodash
var grouped = _.groupBy(['one', 'two', 'three'], 'length')
console.log(grouped)
// output: {3: [&quot;one&quot;, &quot;two&quot;], 5: [&quot;three&quot;]}</code></pre></div> <div class="effect" data-v-2a5edddd></div></div> <div class="right" data-v-2a5edddd><p data-v-2a5edddd>Native</p> <div class="js" data-v-2a5edddd><pre data-v-2a5edddd><code class="javascript" data-v-2a5edddd>// Native
var grouped = ['one', 'two', 'three'].reduce((r, v, i, a, k = v.length) =&gt; ((r[k] || (r[k] = [])).push(v), r), {})
console.log(grouped)
// output: {3: [&quot;one&quot;, &quot;two&quot;], 5: [&quot;three&quot;]}</code></pre></div> <div class="css" data-v-2a5edddd></div></div></div> <h3 id="minby"><a href="#minby" class="header-anchor">#</a> _.minBy</h3> <div class="compare" data-v-2a5edddd><div class="left" data-v-2a5edddd><p data-v-2a5edddd>Lodash</p> <div class="jq" data-v-2a5edddd><pre data-v-2a5edddd><code class="javascript" data-v-2a5edddd>// Underscore/Lodash
var data = [{ value: 6 }, { value: 2 }, { value: 4 }]
var minItem = _.minBy(data, 'value')
var maxItem = _.maxBy(data, 'value')
console.log(minItem, maxItem)
// output: { value: 2 } { value: 6 }</code></pre></div> <div class="effect" data-v-2a5edddd></div></div> <div class="right" data-v-2a5edddd><p data-v-2a5edddd>Native</p> <div class="js" data-v-2a5edddd><pre data-v-2a5edddd><code class="javascript" data-v-2a5edddd>// Native
var data = [{ value: 6 }, { value: 2 }, { value: 4 }]
var minItem = data.reduce(function(a, b) { return a.value &lt;= b.value ? a : b }, {})
var maxItem = data.reduce(function(a, b) { return a.value &gt;= b.value ? a : b }, {})
console.log(minItem, maxItem)
// output: { value: 2 }, { value: 6 }</code></pre></div> <div class="css" data-v-2a5edddd></div></div></div> <h3 id="sample"><a href="#sample" class="header-anchor">#</a> _.sample</h3> <div class="compare" data-v-2a5edddd><div class="left" data-v-2a5edddd><p data-v-2a5edddd>Lodash</p> <div class="jq" data-v-2a5edddd><pre data-v-2a5edddd><code class="javascript" data-v-2a5edddd>// Underscore/Lodash
const array = [0, 1, 2, 3, 4]
const result = _.sample(array)
console.log(result)
// output: 2</code></pre></div> <div class="effect" data-v-2a5edddd></div></div> <div class="right" data-v-2a5edddd><p data-v-2a5edddd>Native</p> <div class="js" data-v-2a5edddd><pre data-v-2a5edddd><code class="javascript" data-v-2a5edddd>// Native
const array = [0, 1, 2, 3, 4]
const sample = arr =&gt; {
  const len = arr == null ? 0 : arr.length
  return len ? arr[Math.floor(Math.random() * len)] : undefined
}
const result = sample(array)
console.log(result)
// output: 2</code></pre></div> <div class="css" data-v-2a5edddd></div></div></div></div> <footer class="page-edit"><!----> <div class="last-updated"><span class="prefix">上次更新:</span> <span class="time">2/17/2021, 11:27:55 PM</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
      ←
      <a href="/blog/dsm/webgl.html" class="prev">
        图形3D开发
      </a></span> <span class="next"><a href="/blog/dsm/finger.html">
        AlloyFinger
      </a>
      →
    </span></p></div> </main></div><div class="global-ui"><BackToTop></BackToTop><!----><Live2D></Live2D></div></div>
    <script src="/blog/assets/js/app.7fa07907.js" defer></script><script src="/blog/assets/js/2.b6c629b5.js" defer></script><script src="/blog/assets/js/17.6ca97902.js" defer></script><script src="/blog/assets/js/4.1dbf8b08.js" defer></script><script src="/blog/assets/js/3.589a64d8.js" defer></script>
  </body>
</html>
